<!--
  * 时间：2024/11/29
  * 作者：刘岩
  * 描述：今日客流
-->
<template>
  <div class="today-flow">
    <div class="my-echarts" ref="myEcharts"></div>
  </div>
</template>

<script>
import { passengerFlowGroups } from '@/api/flow';
import { fontSize } from '@/utils/echartsSize';
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
  name: 'todayFlow',
  props: {
    groups: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {}
  },
  watch: {
    // 监听统计组事件，获取客流数据
    groups(val) {
      // 处理id
      let id = [];
      val.forEach(item => {
        id.push(item.groupId);
      })
      this.getFlow(id.join(','));
    }
  },
  methods: {
    /**
     * 时间：2024/11/29
     * 作者：刘岩
     * 功能：请求客流数据
     */
    getFlow(ids) {
      // 获取当前日期零点
      let startTime =this.$dayjs().startOf('day').format();
      passengerFlowGroups({
        startTime: startTime,
        endTime: this.$dayjs().endOf('day').format(),
        granularity: 'hourly',
        ids: ids
      }).then(res => {
        let resp = JSON.parse(res.msg);
        if (resp.msg === 'success') {
          let data = resp.data.list;
          // 处理数据
          let xData = [];
          let yData = []; // 进客量
          let yData2 = []; // 出客量
          let yData3 = []; // 保有量
          data.forEach(item => {
            xData.push(this.$dayjs(item.statTime).format('HH:mm:ss'));
            yData.push(item.noRepeatInNum);
            yData2.push(item.noRepeatOutNum);
            yData3.push(item.netValue);
          });
          this.init(xData, yData, yData2, yData3);
        }
      });
    },
    /**
     * 时间：2024/11/29
     * 作者：刘岩
     * 功能：渲染图表
     * xData:X轴数据；yData:Y轴数据 进客量; yData：Y轴数据 出客量; yData3：Y轴数据 保有量
     */
    init(xData, yData, yData2, yData3) {
      let myChart = echarts.init(this.$refs.myEcharts);
      let option = {
        legend: {
          data: ['进客量', '出客量', '保有量'],
          textStyle: {
            color: '#ffffff',
            fontSize: fontSize(14)
          },
          icon: 'roundRect',
          itemWidth: fontSize(15), // 图例icon宽度
          padding: [10, 0, 0, 0]
        },
        //悬浮框
        tooltip: {
          trigger: 'axis',
          borderColor: 'transparent', //'#4380D1',
          // alwaysShowContent: true, // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏
          triggerOn: 'mousemove', // 提示框触发的条件
          confine: true, // 是否将 tooltip 框限制在图表的区域内
          backgroundColor: 'rgba(255,255,255,0.2)', // 提示框浮层的背景颜色
          padding: 10, // 提示框浮层内边距，单位px
          position: 'right',
          textStyle: {
            color: '#fff', // 文字的颜色
            fontWeight: '600',
            fontSize: fontSize(18)
          }
        },
        grid: {
          left: '20',
          top: '40',
          right: '20',
          bottom: '10',
          containLabel: true
        },
        xAxis: {
          data: xData,
          axisLabel: {
            color: '#fff',
            fontSize: fontSize(14)
          }
        },
        yAxis: {
          axisLabel: {
            color: '#ffffff',
            fontSize: fontSize(14)
          },
          splitLine: {
            //修改背景线条样式
            show: true, //是否展示
            lineStyle: {
              color: '#1C3F61', //线条颜色
              type: 'dashed' //线条样式，默认是实现，dashed是虚线
            }
          }
        },
        series: [
          {
            type: 'bar',
            name: '进客量',
            smooth: true,
            itemStyle: {
              color: '#0CEBEB'
            },
            data: yData
          },
          {
            type: 'bar',
            name: '出客量',
            smooth: true,
            itemStyle: {
              color: '#b637ff'
            },
            data: yData2
          },
          {
            type: 'bar',
            name: '保有量',
            smooth: true,
            itemStyle: {
              color: '#04c452'
            },
            data: yData3
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  }
}
</script>

<style scoped lang="scss">
.today-flow {
  width: 100%;
  flex: 1;
  .my-echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
